$(function () {
    // 定义一个全局变量 将来方便筛选和分页  实时修改
    let q = {
        pagenum: 1,
        pagesize: 2,
        cate_id: "",
        state: ""
    }
    // 需求一 渲染文章列表
    let layer = layui.layer
    initArticleList()

    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele => {
                arr.push(
                    `  <tr>
                    <td><a href="javascript:;" class="link-detail" data-id=${ele.Id}>${ele.title}</a></td>
                    <td>${ele.cate_name}</td>
                    <td>${ele.pub_date.substr(0,19)}</td>
                    <td>${ele.state}</td>
                    <td>
                        <a href="art_edit.html?id=${ele.Id}" type="button" class="layui-btn layui-btn-xs btn-edit">修改</a>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-del"
                        data-id=${ele.Id}>删除</button>
                    </td>
                </tr>`
                )
            });
            $('tbody').empty().html(arr.join(''))
            renderPage(res.total)
        })
    }

    // 需求二 渲染文章分类列表
    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios({
            method: "GET",
            url: "/my/article/cates",
        }).then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.data.message)
            }
            // 成功  渲染 
            let arr = [`<option value="">请选择文章类别</option>`]
            res.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(
                        `<option value="${ele.Id}">${ele.name}</option>`
                    )
                }
            });

            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render()
        })
    }

    // 需求三  筛选功能
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $("[name=cate_id]").val()
        q.state = $('[name=state]').val()
        initArticleList()
    })

    // 需求四  删除功能
    $('tbody').on('click', '.btn-del', function () {
        let id = $(this).attr('data-id')
        layer.confirm('是否确认删除文章?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then((
                res
            ) => {
                layer.msg(res.data.message)
                $('.btn-del').length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })
            // 关闭询问框
            layer.close(index);
        });

    })

    // 需求五   分页
    function renderPage(total) {
        let laypage = layui.laypage
        laypage.render({
            elem: 'pageBox',
            count: total,
            limit: q.pagesize,
            curr: q.pagenum,
            limits: [2, 5, 10, 15, 20],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            jump: function (obj, first) {
                if (!first) {
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }

    // 需求六  弹出层
    $('tbody').on('click', 'a', function () {
        let atr = window.parent.document.querySelector('.welcome').innerHTML;
        // console.log(atr.split(';')[1]);
        let cate_name = $(this).parent().siblings()[0].innerHTML
        let id = $(this).attr('data-id')
        let txtData = {}

        axios({
            method: 'GET',
            url: '/my/article/' + id
        }).then(({
            data: res
        }) => {

            txtData = res.data
        })
        setTimeout(function () {
            layer.open({
                area: ['85%', '85%'],
                title: '预览文章',
                content: `<div class="artinfo-box">
                <h1 class="artinfo-title">${txtData.title}</h1>
                <div class="artinfo-bar">
                <span>作者：${atr.split(';')[1]}</span>
                <span>发布时间：${txtData.pub_date.split('.')[0]}</span>
                <span>所属分类：${cate_name}</span>
                <span>状态：${txtData.state}</span>
                </div>
                <hr>
                <img src="${ "http://api-breakingnews-web.itheima.net"+ txtData.cover_img}" alt="" class="artinfo-cover">
                <div><p>${txtData.content}</p></div>
            </div>`

            });


        }, 100)



    })

})